import { useState, useEffect } from "react";
import { useStore } from "./store/index.js";
import { observer } from "mobx-react-lite";

import Foo from "./components/foo.jsx";
import Bar from "./components/bar.jsx";

function App() {

  const store = useStore()
  
  useEffect(() => {
    store.personStore.getSingers()  // 异步代码
  }, [])

  return (
    <div>
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>

      <ul onClick={() => store.counterStore.changeList()}>
        {
          store.counterStore.filterList.map((item) => {
            return <li key={item}>{item}</li>;
          })
        }
      </ul>
      <ul>
        {
          store.personStore.singers.map((item) => {
            return <li key={item.name}>{item.name}</li>;
          })
        }
      </ul>

      <Foo />
      <Bar />
    </div>
  );
}

export default observer(App);
